<template>
  <div>
      <Input placeholder="输入关键字进行过滤" v-model="filterText" />

      <Tree class="filter-tree" node-key="id" :data="mainTreeData" :expand="true" disableCheckbox :on-toggle-expand="true"
         ref="mainTree" @on-select-change="getTreeNodeData" >
      </Tree>

</div>
</template>

<script>
import {
  getTree
} from '@/api/org/depart/index'
import { mapGetters } from 'vuex'
export default {
  watch: {
    filterText (val) {
      this.$refs.mainTree.filter(val)
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    initmainTreeData () {
      getTree().then(data => {
        this.mainTreeData = data
      })
    },
    getTreeNodeData (data) {
      console.log(data[0].id)
      this.currentTreeNodeId = data[0].id.id
      this.currentTreeNode = data[0]
    },
    onSubmit () {
      this.$emit('closeDepartDialog', this.currentTreeNode)
    }
  },
  created () {
    this.initmainTreeData()
    // 加载树
    // this.departManager_btn_user_del = this.elements['departManager:btn_user_del'];
  },
  computed: {
    ...mapGetters(['elements'])
  },
  data () {
    return {
      filterText: '',
      currentTreeNodeId: undefined,
      currentTreeNode: {},
      mainTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>
